import { IconButton } from 'gestalt';
import trackButtonClick from './trackButtonClick';

type Props = {
  onClick: () => void;
};

export default function OpenSandboxButton({ onClick }: Props) {
  const label = 'Open in CodeSandbox';

  return (
    <IconButton
      accessibilityLabel={label}
      dangerouslySetSvgPath={{
        __path:
          'M9.365 21.17v-8.645L1.93 8.248v4.928l3.405 1.974v3.705l4.029 2.314zm1.93.05l4.104-2.363v-3.794l3.427-1.986V8.211l-7.53 4.348v8.661zm6.54-14.666L13.878 4.26l-3.475 2.017L6.9 4.257 2.907 6.583l7.452 4.288 7.477-4.316zM0 18.017V6.04L10.377 0l10.38 6.015v11.983l-10.38 5.98L0 18.018z',
      }}
      iconColor="darkGray"
      onClick={() => {
        trackButtonClick(label);
        onClick();
      }}
      size="xs"
      tooltip={{
        text: label,
        inline: true,
        idealDirection: 'up',
        accessibilityLabel: '',
      }}
    />
  );
}
